<template>
  <div class="openlist" :class="{'pc': PC}">
    <div class="game-wrapper">
      <ul v-infinite-scroll="loadBottom" :infinite-scroll-disabled="loading" infinite-scroll-distance="50"
          infinite-scroll-immediate-check="false">
        <li class="game-content border-1px" v-for="(item,$index) in list" :key="$index">
          <div class="img">
            <img width="100%" height="100%" :src="item.icon">
          </div>
          <div class="detail">
            <div class="detail-title">{{item.name}}</div>
            <div class="detail-message">{{item.title}}</div>
            <span class="time" v-if="(item.type===0 || item.type===1) && item.start_time.indexOf('日') < 0">还剩{{item.start_time}}开服</span>
            <span class="time" v-else-if="(item.type===0 || item.type===1) && item.start_time.indexOf('日') > 0">{{item.start_time}}开服</span>
            <span class="time" v-else>已开局{{item.start_time}}</span>
            <div class="btn-open">
              <span class="btn-b-green-no" v-if="item.type===0">
                开服提醒
              </span>
              <span class="btn-b-red" v-else-if="item.type===1">
                即将开服
              </span>
              <a href="javascript:;" class="btn-b-green" @click="startGame(item.url)" v-else>
                开始游戏
              </a>
            </div>
          </div>
        </li>
        <loading-icon v-if="loading"></loading-icon>
      </ul>
      <div class="nomore-wrapper" v-if="total===0">
        <div class="nomore-img">
          <img width="100%" height="100%" src="../../../assets/img/nomore@2x.png">
        </div>
      </div>
      <v-footer v-if="isAll && total!==0"></v-footer>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {startGame} from '../../../assets/js/common'
  import LoadingIcon from '../../common/loading-icon/loading-icon'
  import VFooter from '../../common/footer/footer'

  export default {
    data() {
      return {
        page: 1,
        totalList: '',
        total: '',
        list: [],
        isAll: false,
        loading: false,
        lastPage: ''
      }
    },
    props: {
      loadUrl: {
        type: String
      }
    },
    watch: {
      loading: function (value) {
        if (value) {
          this.Indicator.open({
            text: '拼命加载中(⊙o⊙)...',
            spinnerType: 'fading-circle'
          })
        } else {
          this.Indicator.close()
        }
      }
    },
    methods: {
      startGame,
      getData() {
        this.$http.get(this.loadUrl).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.list = response.data.data
            this.total = Number.parseInt(response.data.total)
            this.totalList = this.list.length
            if (this.total <= 10) {
              this.isAll = true
            } else if (this.total) {

            }
            this.lastPage = Math.ceil(this.total / 10)
          }
        })
      },
      loadBottom() {
        this.page++
        if (this.lastPage > this.page) {
          this.loading = true
          this.$http.get(this.loadUrl, {
            params: {
              page: this.page
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.list = this.list.concat(response.data.data)
              this.totalList = this.list.length
              this.loading = false
            }
          })
        } else {
          this.isAll = true
          this.loading = false
        }
      }
    },
    components: {
      VFooter,
      LoadingIcon
    },
    created() {
      this.getData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .openlist
    &.pc
      padding-bottom 1.28rem
    .nomore-wrapper
      width 100%
      height 100%
      .nomore-img
        margin 100px auto 100px auto
        width 329px
        height 308px
        img
          border-radius 0
    .game-wrapper
      width 100%
      box-sizing border-box
      padding 0 32px
    .game-content
      width 100%
      display inline-flex
      position relative
      padding 24px 0
      overflow hidden
      border-1px(rgba(0, 0, 0, 0.2))
      &:last-child
        border-none()
      img
        flex 0 0 112px
      .detail
        display flex
        width 80%
        flex-direction column
        margin-left 16px
        box-sizing border-box
        .detail-title
          margin-top 8px
          font-size 32px
          color #333
        .detail-message
          padding 5px 0
          margin-top 35px
          font-size 24px
          color #999
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .time
          position absolute
          top 50px
          right 150px
          font-size 24px
          color #999
</style>
